<template>
    <div>
        <el-form label-position="right">
            <el-form-item label="标识：">
                <div class="tag-group">
                    <el-tag
                            style="margin-right: 5px"
                            v-for="item in items"
                            :key="item.label"
                            :type="item.type"
                            effect="dark">
                        {{ item.label }}
                    </el-tag>
                </div>
            </el-form-item>
            <el-form-item label="路径：">
                {{info.path==null?info.path:info.path.toString()}}
            </el-form-item>
            <el-form-item label="方法：">
                {{info.methods.toString()}}
            </el-form-item>
            <el-form-item label="分组：">
                {{info.group.toString()}}
            </el-form-item>
            <el-form-item label="版本：">
                {{info.version.toString()}}
            </el-form-item>
            <el-form-item label="描述：">
                {{info.value}}
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "doc-basicinfo",
        props: {
            data: {
                type: Object
            }
        },
        mounted() {
            this.info = this.data;
            if ((this.info.paths == null || this.info.paths.length == 0)) {
                this.info.path = this.info.apiPath;
                return;
            }
            if (this.info.apiPath == null || this.info.apiPath.length == 0) {
                this.info.path = this.info.paths;
                return;
            }
            this.info.path = this.info.paths.map((i) => {
                return this.info.apiPath.map((x => "/" + x + "/" + i));
            })
        },
        data() {
            return {
                info: {},
                items: [
                    {type: '', label: 'Query'},
                    {type: 'success', label: 'Body'},
                    {type: 'info', label: 'Path'},
                    {type: 'warning', label: 'Form'},
                    {type: 'danger', label: 'FormatData'}
                ]
            };
        }
    }
</script>

<style scoped>
    ::v-deep .el-form-item__content {
        line-height: 30px;
    }

    ::v-deep .el-form-item__label {
        line-height: 30px;
        font-weight: bold;
    }

    ::v-deep .el-form-item {
        margin-bottom: 0px;
        display: flex;
    }
</style>
